<style lang='less'>

</style>

<template>
    <div>
    <Row>
        <Col span="24">
            <Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 600px">
                <FormItem>
                    <Row>
                        <Col span="9" offset="1">
                            <Input type="text" v-model="m1" placeholder="输入社区名称"></Input>
                        </Col>
                        <Col span="4" offset="1">
                            <Button @click="handleSelect()">查询</Button>
                        </Col>
                    </Row>
                </FormItem>
            </Form>
        </Col>
    </Row>
    <Row>
        <rong-cloud-im :login-account="account"></rong-cloud-im>
        <Table border :columns="columns6" :data="data5"></Table>
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>数据正在加载</div>
            </Spin>
          </Col>
        </Row>
        <div style="float: right;margin-top: 10px">
            <Page :total="pageData.totalRecord" show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
        </div>
    </Row>
    </div>
</template>

<script>
import RongCloudIm from '_c/rong-cloud-im'
import {
  // mailList,
  findPhoneList } from '@/api/eventlist'
export default {
  name: 'telnote',
  components: {
    RongCloudIm
  },
  data () {
    return {
      loadData: true,
      serverResult: '',
      account: '',
      formDynamic: {},
      m1: '',
      m2: '',
      columns6: [
        {
          title: '区域',
          key: 'city'
        },
        {
          title: '街道',
          key: 'street'
        },
        {
          title: '社区名称',
          key: 'community'
        },
        {
          title: '社区地址',
          key: 'address'
        },
        {
          title: '社区电话',
          key: 'telephone'
        }
      ],
      data5: [],
      cityData: [],
      pageData: {
        totalRecord: 100,
        pageSize: 10,
        pageNo: 1
      }
    }
  },
  methods: {
    pageChange (ret) {
      console.log(ret)
      this.pageData.pageNo = ret
      this.getApiData()
    },
    pageSizeChange (ret) {
      this.pageData.pageSize = ret
      this.getApiData()
    },
    getApiData () {
      findPhoneList(this.pageData).then(ret => {
        if (ret.data.errcode === 0) {
          this.data5 = ret.data.data.results
          this.loadData = false
          this.cityData = ret.data.data.results
          this.pageData = {
            totalRecord: ret.data.data.totalRecord,
            pageSize: ret.data.data.pageSize,
            pageNo: 1
          }
        } else {
          this.loadData = true
          this.$Notice.error({ title: '通讯录列表失败', desc: res.data.errmsg })
        }
      })
    },
    retFun (data) {
      console.log(data, '返回的信息')
      this.serverResult = JSON.stringify(data)
    },
    handleSelect () {
      let title = this.m1
      this.pageData.community = title
      this.getApiData()
      // let ret = []
      // this.cityData.forEach(item => {
      //  if (item.community.indexOf(title) !== -1) {
      //    ret.push(item)
      //  }
      //  console.log(item)
      //  this.data5 = ret
      // })
    }
  },
  mounted () {
    let severUserInfo = this.$store.state.user.severUserInfo
    this.account = severUserInfo.loginName
    findPhoneList(this.pageData).then(ret => {
      if (ret.data.errcode === 0) {
        console.log(ret.data.data.totalRecord)
        this.data5 = ret.data.data.results
        this.loadData = false
        this.cityData = ret.data.data.results
        this.pageData = {
          totalRecord: ret.data.data.totalRecord,
          pageSize: ret.data.data.pageSize,
          pageNo: 1
        }
      } else {
        this.loadData = true
        this.$Notice.error({ title: '通讯录列表失败', desc: res.data.errmsg })
      }
    })
    console.log(severUserInfo, '在全局状态里面取到用户登录的信息')
  }
}
</script>

<style>

</style>
